/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, SuffixInput, Table, TableBody, TableRow, CCell, Input, TableHead, Select,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import { calcAverMaxArrObj, tableSetInp} from "../../../common/tool";


export const itemA振动评价=['振动表','大rms','均rms'];
export const VibrationEval=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA振动评价,);
        const {inp, setInp} = useItemInputControl({ ref });
        const [aveVibr,maxVibr]=calcAverMaxArrObj(inp?.振动表,(row)=>row?.vs,2,6);
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">运载装置振动测量:</Text>
            {(new Array(6)).fill(null).map((_, w: number) => {
                return <React.Fragment key={w}>
                    序号 {w + 1} ：
                    <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            测量速度
                            <Input value={inp?.振动表?.[w]?.s || ''} size={2}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('振动表', w, inp, setInp, 's', e.currentTarget.value || undefined)}/>
                            m/s
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            运行方向
                            <Select css={{width: '5rem'}}
                                    value={inp?.振动表?.[w]?.f || ''}
                                    onChange={e => tableSetInp('振动表', w, inp, setInp, 'f', e.currentTarget.value || undefined)}>
                                <option></option>
                                <option>上行</option>
                                <option>下行</option>
                            </Select>
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            r.m.s 值 x轴
                            <Input value={inp?.振动表?.[w]?.x || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('振动表', w, inp, setInp, 'x', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            y轴
                            <Input value={inp?.振动表?.[w]?.y || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('振动表', w, inp, setInp, 'y', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            z轴
                            <Input value={inp?.振动表?.[w]?.z || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('振动表', w, inp, setInp, 'z', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            矢量和
                            <Input value={inp?.振动表?.[w]?.vs || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('振动表', w, inp, setInp, 'vs', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            评价等级
                            <Select css={{width: '6rem'}}
                                    value={inp?.振动表?.[w]?.L || ''}
                                    onChange={e => tableSetInp('振动表', w, inp, setInp, 'L', e.currentTarget.value || undefined)}>
                                <option></option><option>好</option><option>中</option>
                                <option>较差</option><option>特别差</option>
                            </Select>
                        </div>
                    </div>
                </React.Fragment>;
            })}
            <Text variant="h6">矢量和一列的：最大r.m.s 值={ maxVibr??''}; &nbsp; 平均r.m.s 值={aveVibr??''};</Text>
            <LineColumn>
                <InputLine  label='最大r.m.s 值：' >
                    <SuffixInput  value={inp?.大rms?? ''} onSave={txt=> setInp({...inp,大rms: txt || undefined })}>m/s²</SuffixInput>
                </InputLine>
                <InputLine  label='平均r.m.s 值：' >
                    <SuffixInput  value={inp?.均rms?? ''} onSave={txt=> setInp({...inp,均rms: txt || undefined })}>m/s²</SuffixInput>
                </InputLine>
            </LineColumn>
        </InspectRecordLayout>;
});

export const itemA扶振评价=['扶振表','扶大rm','扶均rm'];
export const　HandrailVibEval=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA扶振评价,);
        const {inp, setInp} = useItemInputControl({ ref });
        const [aveVibr, maxVibr] =React.useMemo(() => {
            const leftar =inp?.扶振表.map((a:  any)=>a?.o) || [];
            const rightar =inp?.扶振表.map((a: { t: any; })=>a?.t) || [];
            const allsmr =[...leftar, ...rightar];
            const [aveVibr,maxVibr]=calcAverMaxArrObj(allsmr,(row)=>row,2, 8);
            return [aveVibr, maxVibr];
        }, [inp?.扶振表]);
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">扶手带振动测量:</Text>
            {(new Array(4)).fill(null).map((_, w: number) => {
                return <React.Fragment key={w}>
                    序号 {w + 1} ：
                    <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            测量速度
                            <Input value={inp?.扶振表?.[w]?.s || ''} size={2}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('扶振表', w, inp, setInp, 's', e.currentTarget.value || undefined)}/>
                            m/s
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            运行方向
                            <Select css={{width: '5rem'}}
                                    value={inp?.扶振表?.[w]?.f || ''}
                                    onChange={e => tableSetInp('扶振表', w, inp, setInp, 'f', e.currentTarget.value || undefined)}>
                                <option></option>
                                <option>上行</option>
                                <option>下行</option>
                            </Select>
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            位置： 左侧
                            <Input value={inp?.扶振表?.[w]?.l || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('扶振表', w, inp, setInp, 'l', e.currentTarget.value || undefined)}/>
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            右侧
                            <Input value={inp?.扶振表?.[w]?.r || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('扶振表', w, inp, setInp, 'r', e.currentTarget.value || undefined)}/>
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            r.m.s 值 ：（1）=
                            <Input value={inp?.扶振表?.[w]?.o || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('扶振表', w, inp, setInp, 'o', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            （2）=
                            <Input value={inp?.扶振表?.[w]?.t || ''} size={3}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('扶振表', w, inp, setInp, 't', e.currentTarget.value || undefined)}/>m/s²
                        </div>
                        <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            评价等级
                            <Select css={{width: '6rem'}}
                                    value={inp?.扶振表?.[w]?.L || ''}
                                    onChange={e => tableSetInp('扶振表', w, inp, setInp, 'L', e.currentTarget.value || undefined)}>
                                <option></option><option>好</option><option>中</option>
                                <option>较差</option><option>特别差</option>
                            </Select>
                        </div>
                    </div>
                </React.Fragment>;
            })}
            <Text variant="h6">两列的：最大r.m.s 值={ maxVibr??''}; &nbsp; 平均r.m.s 值={aveVibr??''};</Text>
            <LineColumn>
                <InputLine  label='最大r.m.s 值：' >
                    <SuffixInput  value={inp?.扶大rm?? ''} onSave={txt=> setInp({...inp,扶大rm: txt || undefined })}>m/s²</SuffixInput>
                </InputLine>
                <InputLine  label='平均r.m.s 值：' >
                    <SuffixInput  value={inp?.扶均rm?? ''} onSave={txt=> setInp({...inp,扶均rm: txt || undefined })}>m/s²</SuffixInput>
                </InputLine>
            </LineColumn>
        </InspectRecordLayout>;
});


export const 运行振动评价表= ({orc, rep,label} :{orc:any, rep:any,label:string}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}>
            <Text id={'VibrationEval'} variant="h4" css={{marginTop: '1rem',
            }}>{label}</Text>
        </div>
        <Table fixed={["%"]} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8rem'}}} tight miniw={800}>
            <TableBody>
                <TableRow><CCell>运载装置振动测量结果</CCell></TableRow>
            </TableBody>
        </Table>
        <Table fixed={ ["4%", "15%", "12%", "14%","14%", "14%", "14%", "%"] }
                           css={{borderCollapse: 'collapse', }} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell rowSpan={2}>序号</CCell><CCell rowSpan={2}>测量速度m/s</CCell><CCell rowSpan={2}>运行方向</CCell>
                    <CCell colSpan={4}>r.m.s 值 m/s²</CCell><CCell rowSpan={2}>评价等级</CCell>
                </TableRow>
                <TableRow><CCell>x轴</CCell><CCell>y轴</CCell><CCell>z轴</CCell><CCell>矢量和</CCell></TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'VibrationEval'}>
                    { (orc?.振动表??[null,])?.map((o: any, i: number) => {
                        return (
                            <TableRow key={i}>
                                <CCell>{i+1}</CCell><CCell>{o?.s??'/'}</CCell><CCell>{o?.f??'/'}</CCell>
                                <CCell>{o?.x??'/'}</CCell><CCell>{o?.y??'/'}</CCell><CCell>{o?.z??'/'}</CCell>
                                <CCell>{o?.vs??'/'}</CCell><CCell>{o?.L??'/'}</CCell>
                            </TableRow>
                        );
                    } ) }
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["19%", "26%", "28%", "%"] }
                            css={{borderCollapse: 'collapse', }} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'VibrationEval'}>
                    <TableRow>
                        <CCell>最大r.m.s 值：</CCell><CCell>{orc?.大rms??'/'}</CCell>
                        <CCell>平均r.m.s 值：</CCell><CCell>{orc?.均rms??'/'}</CCell>
                    </TableRow>
                    <TableRow><CCell colSpan={4}>扶手带振动测量结果</CCell></TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["4%", "15%", "12%", "14%","14%", "14%", "14%", "%"] }
                        css={{borderCollapse: 'collapse', }} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell rowSpan={2}>序号</CCell><CCell rowSpan={2}>测量速度m/s</CCell><CCell rowSpan={2}>运行方向</CCell>
                    <CCell colSpan={2}>位置</CCell><CCell rowSpan={2} colSpan={2}>r.m.s 值 m/s²</CCell><CCell rowSpan={2}>评价等级</CCell>
                </TableRow>
                <TableRow><CCell>左侧</CCell><CCell>右侧</CCell></TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'HandrailVibEval'}>
                    { (orc?.扶振表??[null,])?.map((o: any, i: number) => {
                        return (
                            <TableRow key={i}>
                                <CCell>{i+1}</CCell><CCell>{o?.s??'/'}</CCell><CCell>{o?.f??'/'}</CCell>
                                <CCell>{o?.l??'/'}</CCell><CCell>{o?.r??'/'}</CCell><CCell>{o?.o??'/'}</CCell>
                                <CCell>{o?.t??'/'}</CCell><CCell>{o?.L??'/'}</CCell>
                            </TableRow>
                        );
                    } ) }
                </RepLink>
            </TableBody>
        </Table>
        <Table id={'HandrailVibEval'} fixed={ ["19%", "26%", "28%", "%"] }
                  css={{borderCollapse: 'collapse', }} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'HandrailVibEval'}>
                    <TableRow>
                        <CCell>最大r.m.s 值：</CCell><CCell>{orc?.扶大rm??'/'}</CCell>
                        <CCell>平均r.m.s 值：</CCell><CCell>{orc?.扶均rm??'/'}</CCell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </>;
};
